<template>
  <view>
    <view
      class="tm-sticky flex flex-col"
      :style="[
        props.model == 'top' ? { top: `${_offset}` } : '',
        props.model == 'left' ? { left: `${_offset}` } : '',
        { 'z-index': props.zIndex },
      ]"
    >
      <view class="flex flex-col">
        <slot name="sticky"></slot>
      </view>
    </view>
    <view>
      <slot></slot>
    </view>
  </view>
</template>
<script lang="ts" setup>
/**
 * 粘性定位
 * @description 请注意使用方法，为了兼容所有端，如果你想让粘性在某块区域，必须把其它内容套在本组件内。
 * @slot sticky 定位内容
 * @slot default 正常的布局文档内容
 * @example  <tm-sticky >
                <template v-slot:sticky>
                        <!-- 这里是粘性内容 -->
                        <text>{{ status }}{{statusw}}</text>
                </template>
                <!-- 这里放置你的内容内容 -->
            </tm-sticky>
 */
import { computed, ref } from 'vue'
const props = defineProps({
  //可能的值为:left,top
  //默认为：top
  model: {
    type: String,
    default: 'top',
  },
  offset: {
    type: [String, Number],
    default: '0px',
  },
  //层级对于nvue是无效的。
  zIndex: {
    type: Number,
    default: 50,
  },
})
const _offset = computed(() => {
  if (typeof props.offset === 'number') return props.offset + 'rpx'
  return props.offset
})
</script>
<style scoped>
.tm-sticky {
  position: sticky;
}
</style>
